<!--
 * @Descripttion: 退签 退购信息
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 16:44:43
 * @LastEditTime: 2021-09-13 14:01:30
-->
<template>
  <div class="order-status-msg">
    <p class="title">{{orderStatusName}}信息</p>
    <ul class="flex flex-wrap">
      <li v-for="(item,index) in msgList" :key="index" :style="{'width':item.inline?'100%':'50%'}">
        <template v-if="item.key=='accumulateMoney' || item.key=='residueBill'">
          <div v-if="orderStatusName=='退签'" class="flex">
            <p class="text-right name"><span v-show="item.statusName">{{orderStatusName}}</span>{{item.name}}：</p>
            <p>{{$tool.formatterMoney(statusMsg[item.key])}}{{item.unit}}</p>
          </div>
        </template>
        <template v-else-if="item.key=='orAnnexList'">
          <div class="flex">
            <p class="text-right name"><span v-show="item.statusName">{{orderStatusName}}</span>{{item.name}}：</p>
            <enclosure-img :images="statusMsg[item.key]" :showDownLoad="false" :showDelete="false"> </enclosure-img>
          </div>
        </template>
        <template v-else>
          <div class="flex">
            <p class="text-right name"><span v-show="item.statusName">{{orderStatusName}}</span>{{item.name}}：</p>
            <p v-if="item.key=='auditName'">{{statusMsg[item.key]}}({{statusMsg['workNo']}})</p>
            <p v-else class="text-show">{{statusMsg[item.key]}}</p>
          </div>
        </template>
      </li>
    </ul>
  </div>
</template>
<script>
import enclosureImg from '@/components/enclosureImg.vue'
export default {
  props: ['detailMsg', 'orderStatusName'],
  components: { enclosureImg },
  data() {
    return {
      statusMsg: {},
      msgList: [
        {
          name: '日期',
          key: 'backDate',
          statusName: true,
          inline: true,
          unit: '',
        },
        {
          name: '累计已到账房款',
          key: 'accumulateMoney',
          statusName: false,
          inline: false,
          unit: '元',
        },
        {
          name: '剩余未到账房款',
          key: 'residueBill',
          statusName: false,
          inline: false,
          unit: '元',
        },
        {
          name: '原因',
          key: 'backReason',
          statusName: true,
          inline: true,
          unit: '',
        },
        {
          name: '附件',
          key: 'orAnnexList',
          statusName: false,
          inline: true,
          unit: '',
        },
        {
          name: '审核人',
          key: 'auditName',
          statusName: false,
          inline: false,
          unit: '',
        },
        {
          name: '审核时间',
          key: 'auditDate',
          statusName: false,
          inline: false,
          unit: '',
        },
      ],
    }
  },
  mounted() {
    this.statusMsg = { ...this.detailMsg.orContractWebInfoBackVO }
    if (this.statusMsg.orAnnexList && this.statusMsg.orAnnexList != '-') {
      this.statusMsg.orAnnexList = JSON.parse(this.statusMsg.orAnnexList)
    } else {
      this.statusMsg.orAnnexList = []
    }
  },
}
</script>
<style lang="scss" scoped>
.order-status-msg {
  ul {
    li {
      width: 50%;
      line-height: 50px;
      .name {
        width: 150px;
      }
      .text-show {
        width: 100%;
        word-break: break-all;
      }
    }
  }
}
</style>